<div  class="div_contentlist">
											<!-- select 区域 -->
											<input type="hidden" id="cateId" th:value="${cate}" />
											<div  th:each="attrMapTthree,iterStat : ${attrMapThree}"  >
                                            	<ul >
                                            		<li>
                                            		<label><span th:text="${attrMapTthree.key}"></span></label>
                                            		<label >
													<select th:class="slelect_checked" name="selelctList" >
														<option  th:each="selectList : ${attrMapTthree.value}" th:value="${selectList}" th:text="${selectList}"></option>
													</select>
                                            		</label>
                                            		</li>
                                            	</ul>
                                        	</div>
                                        	<!-- select 区域 -->
											<br/>
											<!-- checkbox 区域 -->
											
											 <div th:each="attrMapOneMap: ${attrMapOne}">
                                             	<div th:if="${attrMapOneMap.key} != null"  >
                                             	<input type="hidden" id="sdfds" th:value="${val}"/>
                                             	<input type="hidden" id="attrMapOneColor" th:value="${attrMapOneMap.key}" />
                                             	<ul class="Father_Title">  
                                   					 <li><span th:text="${attrMapOneMap.key}"></span></li>  
                               				    </ul> 
                                            	<ul th:class="Father_Item0">
                                            		<li CLASS="li_width1">
                                            		<span th:each="checkboxOneList,iterStat : ${attrMapOneMap.value}">
                                            			<input th:if="${val} == edit"  type="checkbox"   name="goodsColorIdList"  th:field="*{goodsColorIdList}"     th:value="${checkboxOneList}" th:attr="id='goods_attributeColor'+${iterStat.index}" th:class="goods_attributeColor" th:href="${checkboxOneList}+'_'+${iterStat.index}" onclick="check_hiddenOne(event,this);"/>
                                            			<input th:if="${val} == ajax"  type="checkbox"   name="goodsColorIdList"   th:value="${checkboxOneList}" th:attr="id='goods_attributeColor'+${iterStat.index}" th:href="${checkboxOneList}+'_'+${iterStat.index}" onclick="check_hiddenOne(event,this);"/>
                                            			<span  th:text="${checkboxOneList}" th:attr="id='span_valOne'+${iterStat.index},class='span_valOne'+${iterStat.index}"></span>
                                            			<input type="hidden" value="" style="width:50px;height:30px;"  th:attr="name='goodsColorList['+${iterStat.index}+']',id='input_checkOne'+${iterStat.index},class='goods_attributeColor'+${iterStat.index}" />
                                            		</span>
                                            		</li>
                                            	</ul>
                                        		</div>
                                        	</div>
                                            <div th:each="attrMapOneMap: ${attrMapColor}">
                                             	<div th:if="${attrMapOneMap.key} != null"  >
                                             	<input type="hidden" id="sdfds" th:value="${val}"/>
                                             	<input type="hidden" id="attrMapOneColor" th:value="${attrMapOneMap.key}" />
                                             	<ul class="Father_Title">  
                                   					 <li><span th:text="${attrMapOneMap.key}"></span></li>  
                               				    </ul> 
                                            	<ul th:class="Father_Item0">
                                            		<li CLASS="li_width1">
                                            		<span th:each="checkboxOneList,iterStat : ${attrMapOneMap.value}" >
                                            			<span th:each="checkboxOneListvalue: ${checkboxOneList.value}">
                                             			<input th:if="${val} == edit"  type="checkbox"    name="goodsColorIdList"  th:field="*{goodsColorIdList}"     th:value="${checkboxOneListvalue}" th:attr="id='goods_attributeColor'+${iterStat.index}" th:class="goods_attributeColor" th:href="${checkboxOneListvalue}+'_'+${iterStat.index}" onclick="check_hiddenOne(event,this);"/> 
                                             			<input th:if="${val} == ajax"  type="checkbox"    name="goodsColorIdList"   th:value="${checkboxOneListvalue}" th:attr="id='goods_attributeColor'+${iterStat.index}" th:href="${checkboxOneListvalue}+'_'+${iterStat.index}" onclick="check_hiddenOne(event,this);"/>
                                            			<span th:each="checkboxOneListkey: ${checkboxOneList.key}">
                                            			<input th:attr="style='background-color:'+${checkboxOneListkey}+';width:20px;height:20px;'" />
                                            			</span>
                                            			<span  th:text="${checkboxOneListvalue}" th:attr="id='span_valOne'+${iterStat.index},class='span_valOne'+${iterStat.index}" ></span>
                                            			<input type="hidden" value="" maxlength="10" style="width:50px;height:30px;"  th:attr="name='goodsColorList['+${iterStat.index}+']',id='input_checkOne'+${iterStat.index},class='goods_attributeColor'+${iterStat.index}"/>
                                            			</span>
                                            		</span>
                                            		</li>
                                            	</ul>
                                        	
                                        	</div>
                                        	</div>
                                        	<div  th:each="attrMapTwoMap: ${attrMapTwo}">
                                             	<ul class="Father_Title">  
                                   					 <li><span th:text="${attrMapTwoMap.key}"></span></li>  
                               				    </ul> 
                                            	<ul th:class="Father_Item1">
                                            		<li CLASS="li_width1">
                                            		<span th:each="checkboxTwoList,iterStat : ${attrMapTwoMap.value}">
                                            		<input th:if="${val} == edit" type="checkbox"   name="goodsSizeIdList" th:field="*{goodsSizeIdList}"   th:value="${checkboxTwoList}" th:attr="id='goods_attributeSize'+${iterStat.index}" th:class="goods_attributeSize" th:href="${checkboxTwoList}+'_'+${iterStat.index}" onclick="check_hiddenTwo(event,this);"/>
                                            		<input th:if="${val} == ajax" type="checkbox"   name="goodsSizeIdList"  th:value="${checkboxTwoList}" th:attr="id='goods_attributeSize'+${iterStat.index}" th:href="${checkboxTwoList}+'_'+${iterStat.index}" onclick="check_hiddenTwo(event,this);"/>
                                            		<span  th:text="${checkboxTwoList}" th:attr="id='span_valTwo'+${iterStat.index},class='span_valTwo'+${iterStat.index}"></span>
                                            		<input type="hidden" value="" maxlength="10" style="width:50px;height:30px;"   th:attr="name='goodsSizeList['+${iterStat.index}+']',id='input_checkTwo'+${iterStat.index},class='goods_attributeSize'+${iterStat.index}" />
                                            		</span>
                                            		</li>
                                            	</ul>
                                        	</div>
                                        	<!-- checkbox 区域 -->
                                <div class="col-md-15" style="display:none;">  
                                
                                <ul>  
                                    <li>  
                                        <div id="createTable">  
                                        </div>  
                                    </li>  
                                </ul>  
                            	</div>

<table class="table table-striped table-hover table-bordered"  id="sample_editable_2">
</table>
<br/><br/><br/><br/>
<div id="attribute_table">
<table class="table table-striped table-hover table-bordered form-group" id="sample_editable_1" style="display:none;">
</table>

</div>                      
</div>

     <script th:inline="javascript">
/*<![CDATA[*/
	
	function check_hiddenOne(event,element){
		if (event.stopPropagation) { 
			// this code is for Mozilla and Opera 
			event.stopPropagation(); 
			} 
			else if (window.event) { 
			// this code is for IE 
			window.event.cancelBubble = true; 
			}
		 
		var checkedVal = $(element).attr("href").split("_")[0];
		var index=$(element).attr("href").split("_")[1];
		if($("#goods_attributeColor"+index).attr('checked') == 'checked'){
			$("#bt_submit").hide();
	    	$("#bt_submitSKU").show();
			$(".goods_attributeColor"+index).attr("value",checkedVal)
			$(".goods_attributeColor"+index).attr("type","text")
			$("#span_valOne"+index).css("display","none")
		}else{
			$("#bt_submitSKU").hide();
	    	$("#bt_submit").show();
			$(".goods_attributeColor"+index).attr("type","hidden")
			$(".goods_attributeColor"+index).attr("value","")
			$("#span_valOne"+index).css("display","")
		}
	}
	
	function check_hiddenTwo(event,element){
		var checkedVal = $(element).attr("href").split("_")[0];
		var index=$(element).attr("href").split("_")[1];
		if($("#goods_attributeSize"+index).attr('checked') == 'checked'){
			$(".goods_attributeSize"+index).attr("value",checkedVal)
			$(".goods_attributeSize"+index).attr("type","text")
			$("#span_valTwo"+index).css("display","none")
		}else{
			$(".goods_attributeSize"+index).attr("type","hidden")
			$(".goods_attributeSize"+index).attr("value","")
			$("#span_valTwo"+index).css("display","")
		}
	}
	
	function createTable(){
		var color = document.getElementById("attrMapOneColor").value;
		if(color=="颜色"){
			 var SKUObj = $(".Father_Title");  
             //var skuCount = SKUObj.length;//  
             var arrayTile = new Array();　//标题组数  
             var arrayInfor = new Array();　//盛放每组选中的CheckBox值的对象   
             var arrayColumn = new Array();//指定列，用来合并哪些列  
             var bCheck = true;//是否全选  
             var columnIndex = 0;  
             $.each(SKUObj, function (i, item) {  
                 arrayColumn.push(columnIndex);  
                 columnIndex++;  
                 arrayTile.push(SKUObj.find("li").eq(i).html().replace("：", ""));  
                 var itemName = "Father_Item0";  
                 //选中的CHeckBox取值  
                 var order = new Array(); 
                 $("." + itemName + " input[type=checkbox]:checked").each(function () {
                     order.push($(this).val());  
                 });
                 arrayInfor.push(order);
             });  
             var RowsCount = 0;  
             var table = $("#sample_editable_2").html("");
             var thead = $("<thead></thead>");  
             thead.appendTo(table);  
             var trHead = $("<tr></tr>");  
             trHead.appendTo(thead);  
             ////生成组合  
             var zuheDate = doExpic(arrayInfor); 
              if (zuheDate.length > 0) {
				var td = $("<td>颜色</td>");  
                td.appendTo(trHead);  
                var itemColumHead = $("<td  style=\"width:30px;\">图片（无图片可不填）</td>");  
                itemColumHead.appendTo(trHead); 
                var tbody = $("<tbody></tbody>");  
                tbody.appendTo(table);  
                 //创建行  
                 $.each(zuheDate, function (index, item) {
                     var td_array = item.split(","); 
                     var tr = $("<tr></tr>");  
                     tr.appendTo(tbody);
                     var td = $("<td name='' id='text_pron' style='width:70px;'>"+td_array[0]+" </td>");
                     td.appendTo(tr);  
                     var td1 = $("<td style='width:70px;' ><input type='file'name='files' onchange='fileColor(this,"+index+")' id='imgShow"+index+"' class='fileValues'/></td>");
                     td1.appendTo(tr);  
                     var td2 = $("<td style='width:70px;' ><img height='30' width='30' class='imgShow"+index+"' th:src='' /></td>");
                     td2.appendTo(tr); 
                 }); 
                 
                 $("#sku_list_goodsAttrList td").each(function(i){
 			 		$(".imgShow"+i).attr("src",$(this).html()); 
          });
                 
             }  
		}else{
			return false;
		}
		
	}
 
    $(function () {  
    	
        //SKU信息  
       $(".div_contentlist span").bind("change", function () { 
            step.Creat_Table();  
            createTable();
       });  
        var step = {
        		//SKU信息组合  
            Creat_Table: function () { 
                step.hebingFunction();  
                var SKUObj = $(".Father_Title");  
                //var skuCount = SKUObj.length;//  
                var arrayTile = new Array();　//标题组数  
                var arrayInfor = new Array();　//盛放每组选中的CheckBox值的对象   
                var arrayColumn = new Array();//指定列，用来合并哪些列  
                var bCheck = true;//是否全选  
                var columnIndex = 0;  
                $.each(SKUObj, function (i, item) { 
                    arrayColumn.push(columnIndex);  
                    columnIndex++;  
                    arrayTile.push(SKUObj.find("li").eq(i).html().replace("：", ""));  
                   // alert(i);
                    var itemName = "Father_Item" + i;  
                    
                    //选中的CHeckBox取值  
                    var order = new Array(); 
                   // $("#goods_attributeColor"+i).trigger("click");
                   
                    $("." + itemName + " input[type=checkbox]:checked").each(function (i) {
                        order.push($(this).val());  
                    });
                    arrayInfor.push(order);
                });  
                
                //开始创建Table表              
                if (bCheck == true) {
                	document.getElementById("attribute_table").style.display="";
                    var RowsCount = 0;  
                    var table = $("#sample_editable_1").html("");
                    var thead = $("<thead></thead>");  
                    thead.appendTo(table);  
                    var trHead = $("<tr></tr>");  
                    trHead.appendTo(thead);  
                    ////生成组合  
                    var zuheDate = step.doExchange(arrayInfor);
                    if (zuheDate.length > 0) {
                    	 $.each(arrayTile, function (index, item) { 
                             var td = $("<td>" + item + "</td>");  
                             td.appendTo(trHead);  
                         });  
                         var tbody = $("<tbody></tbody>");  
                         tbody.appendTo(table);  
                        //创建行  
                        
                        $.each(zuheDate, function (index, item) {
                            var td_array = item.split(",");  
                            var tr = $("<tr></tr>");  
                            tr.appendTo(tbody);
                            $.each(td_array, function (i, values) {  
                            	var td = $("<td name='' id='text_pron' style='width:70px;'>"+values+" </td>");
                                var td1 = $("<input type='hidden' name='goodsAttribute["+index+"].attributeValues' class='goodsVal' value="+values+" style='width:70px;'></input>");
                                td1.appendTo(tr);
                               td.appendTo(tr);  
                            });  
                        });  
                    }  
                    //结束创建Table表  
                    arrayColumn.pop();//删除数组中最后一项  
                    //合并单元格  
                    $(table).mergeCell({  
                        // 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始  
                        cols: arrayColumn  
                    });                      
                    
                }  
            },//合并行  
            hebingFunction: function () {  
                $.fn.mergeCell = function (options) {  
                    return this.each(function () {  
                        var cols = options.cols;  
                        for (var i = cols.length - 1; cols[i] != undefined; i--) {  
                            // fixbug console调试   
                            // console.debug(cols[i]);   
                            mergeCell($(this), cols[i]);  
                        }  
                        dispose($(this));  
                    });  
                };  
                // 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法              
                function mergeCell($table, colIndex) {  
                    $table.data('col-content', ''); // 存放单元格内容   
                    $table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1   
                    $table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象   
                    $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用   
                    // 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan   
                    $('tbody tr', $table).each(function (index) {  
                        // td:eq中的colIndex即列索引   
                        var $td = $('td:eq(' + colIndex + ')', this);  
                        // 取出单元格的当前内容   
                        var currentContent = $td.html();  
                        // 第一次时走此分支   
                        if ($table.data('col-content') == '') {  
                            $table.data('col-content', currentContent);  
                            $table.data('col-td', $td);  
                        } else {  
                            // 上一行与当前行内容相同   
                            if ($table.data('col-content') == currentContent) {  
                                // 上一行与当前行内容相同则col-rowspan累加, 保存新值   
                                var rowspan = $table.data('col-rowspan') + 1;  
                                $table.data('col-rowspan', rowspan);  
                                // 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响   
                                $td.hide();  
                                // 最后一行的情况比较特殊一点   
                                // 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan   
                                if (++index == $table.data('trNum'))  
                                    $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));  
                            } else { // 上一行与当前行内容不同   
                                // col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理   
                                if ($table.data('col-rowspan') != 1) {  
                                    $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));  
                                }  
                                // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan   
                                $table.data('col-td', $td);  
                                $table.data('col-content', $td.html());  
                                $table.data('col-rowspan', 1);  
                            }  
                        }  
                    });  
                }  
                // 同样是个private函数 清理内存之用   
                function dispose($table) {  
                    $table.removeData();  
                }  
            },  
            //组合数组  
            doExchange: function (doubleArrays) {  
                var len = doubleArrays.length;
                if (len >= 2) {  
                    var arr1 = doubleArrays[0];  
                   var arr2 = doubleArrays[1];  
                    var len1 = doubleArrays[0].length;  
                   var len2 = doubleArrays[1].length;
                    var newlen = len1 * len2;  
                    var temp = new Array(newlen);  
                    var index = 0;  
                    for (var i = 0; i < len1; i++) {  
                        for (var j = 0; j < len2; j++) {  
                            temp[index] = arr1[i] + "," + arr2[j];  
                            index++;  
                        }  
                    }   
                    
                    var newArray = new Array(len - 1);  
                    newArray[0] = temp;  
                    if (len > 2) {  
                        var _count = 1;  
                        for (var i = 2; i < len; i++) {  
                            newArray[_count] = doubleArrays[i];  
                            _count++;  
                        }  
                    }  
                    return step.doExchange(newArray);  
                }  
                
                else {  
                    return doubleArrays[0];  
                }  
            }  
        }  
        return step;  
    })  
    
    function doExpic(doubleArrays) {  
   
                var len = doubleArrays.length;
                if (len >= 2) {  
                    var arr1 = doubleArrays[0];  
                    var len1 = doubleArrays[0].length;  
                    var newlen = len1;  
                    var temp = new Array(newlen);  
                    var index = 0;  
                    for (var i = 0; i < len1; i++) {  
                            temp[index] = arr1[i] ;
                            index++;  
                    }  
                    var newArray = new Array(len - 1);  
                    newArray[0] = temp;  
                    if (len > 2) {  
                        var _count = 1;  
                        for (var i = 2; i < len; i++) {  
                            newArray[_count] = doubleArrays[i];  
                            _count++;  
                        }  
                    }  
                    return doExpic(newArray);  
                }  
                
                else {  
                    return doubleArrays[0];  
                }  
            } 
    
    
    function checkSkuGoodsSn(e){
    	var skugoodsSN = e.value
    	 $.ajax({
             url: '/goods/goods/verifySKUGoodsSN/',
             type: 'post',
             data: {'skuGoodsSN': skugoodsSN},
             contentType: "application/x-www-form-urlencoded; charset=utf-8",
             error: function () {
                 alert('出错');
             },
             success: function (data) {
            	 alert(data);
             }
         }).done(function( html ) {
 		    $("#div_sku_grid").html( html );
 		  });
    }
    
    function fileColor(target,index) {
    	var skupic = $("#imgShow"+index).val();  
    	if(!/\.(gif|jpg|jpeg|png|gif|jpg|png)$/i.test(skupic)){
              alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
              $("#imgShow"+index).val("");  
       }else{ 
        var fileSize = 0;  
        if (!target.files) {
            var filePath = target.value;
            var fileSystem = new ActiveXObject("Scripting.FileSystemObject");   
            var file = fileSystem.GetFile (filePath);
            fileSize = file.Size;
        } else {
            fileSize = target.files[0].size;
        }

        if(fileSize == 0 || fileSize >=5120000){
        	alert("文件大小不能为0，或者大于5MB");
        	$("#imgShow"+index).val(""); 
        }
    }
    
    }
	           

/*]]>*/
</script>
                        